<template>
  <div slot>


  <v-data-table
    :headers="headers"
    :items="companys"
    hide-actions
    class="elevation-1"
  >
    <template slot="items" slot-scope="props"  >
      <td>{{ props.item.id }}</td>
      <td  >{{ props.item.company_name }}</td>
      <td >{{ props.item.mobile }}</td>
     <td   ><v-btn flat color="primary" @click="showDetail(props.item.id)">详情</v-btn></td>
    </template>
  </v-data-table>
  <v-pagination
    v-model="page"
    :length="countPage"
  ></v-pagination>
    <v-dialog
      v-model="dialog"
      width="500"
    >
      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          {{company.company_name}}
        </v-card-title>

        <v-card-text>
          <p>联系电话:{{company.mobile}}</p>
          <p>营业执照:
            <span slot v-if="company.yyzz == 'http://hgncpsy.cos.sziitjx.cn/'">无</span>
            <a  v-else :href='company.yyzz' target="_blank" >查看</a>
          </p>
          <p>产品检验合格证书:
            <span slot v-if="company.ca == 'http://hgncpsy.cos.sziitjx.cn/'">无</span><a  v-else :href='company.ca' target="_blank" >查看</a>
          </p>
          <p>其它证照: <span slot v-if="company.other == 'http://hgncpsy.cos.sziitjx.cn/'">无</span><a  v-else :href='company.other' target="_blank" >查看</a></p>
          <p>创建时间:{{company.create_time}}</p>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat
          color="error"
                 @click="del"
          >
            删除
          </v-btn>
          <v-btn flat
                 color="warning"
                 @click="edit"
          >
            修改
          </v-btn>
          <v-btn
            color="primary"
            flat
            @click="dialog = false"
          >
            关闭
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
    export default {
        name: "CompanyShow",
      data(){
          return {
            companys:[] ,
            company:{
              company_name:"",
              mobile:"",
              yyzz:"",
              ca:"",
              other:"",
              id:""
            },
            countPage:1,
            page:1,
            dialog:false,
            headers: [
              { text: 'Id', value: 'id' },
              { text: '公司名称', value: 'company_name' },
              { text: '电话', value: 'mobile' },
              { text: '操作' },
            ],
          }

      },
        methods:{
          showCompany(){
            let this_ = this
            this.axios.get('/index/company/show/page/'+this.page ).then(function (res) {

              this_.companys = res.data.data.companys
              this_.countPage = res.data.data.countPage
              this_.page = parseInt(res.data.data.page)
            })
          },
          showDetail(id){
           let this_ = this
            this.axios.post('/index/company/findACompany',{id:id}).then(function (res) {
        this_.company = res.data.data
              this_.dialog = true
            })
          //  this.dialog = true
          },
          del(){
           let this_ = this
            this.axios.post('/index/company/del',{id:this.company.id}).then(function (res) {
              this_.dialog = false
              this_.showCompany()
            })
          },
          edit(){
            this.$router.push('/company/edit/'+this.company.id)
          }
        },
      mounted(){
          this.showCompany()
      },
      watch:{
          page(newV,oldV){
            console.log(this.page)
            //console.log(newV)
            this.showCompany()
         //   console.log(oldV)
          }
      }
    }
</script>

<style scoped>

</style>
